
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

// 渲染api分类
let apiList = document.querySelector('#apiList');
// 交互对应
let span = document.querySelector('#spanA');
let iput = document.querySelector('#put');

// console.log(iput);
// 创建一个存放代码块
let depositAlist = '';

// 将内容循环在代码块里
apiTypeData.forEach(function (e, i) {
    depositAlist += `<li class="${e.isnew ? 'fod' : ''} ${i === 0 ? 'Check_on' : ''}"  data-key='${e.keyword}'>${e.name}</li>`

})
// 渲染到页面上
apiList.innerHTML = depositAlist;

// 点击分类
apiList.addEventListener('click', function (v) {
    // 找到li
    if (v.target.nodeName == 'LI') {

        [...apiList.children].forEach(function (item) {
            item.classList.remove('Check_on')
        })
        v.target.classList.add('Check_on')
        span.textContent = v.target.textContent

        iput.placeholder = v.target.dataset.key
    }
})

// 渲染页面
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

// 获取父元素
let split_List = document.querySelector('.split_List>ul');
console.log(split_List);
// 创建一个代码块存储数据
let depositAlistB = '';
// 遍历数据
listDataArr.forEach(function (itene) {
    depositAlistB += `
    <li>
    <a href="">
        <div class="split_List_img"><img src="../assets/img/${itene.img}" alt=""></div>
        <div class="split_List_content">
            <p class="Secondary_title">${itene.name}</p>
            <p class="${itene.price == '免费' ? 'category' : 'category_red'}">${itene.price}</p>
            <span class="spanE ${itene.isSpecial ? 'bok' : 'bon'}">企业专用</span> 
        </div>
    </a>
    <span class="spanE ${itene.isSpecial ? 'bok' : 'bon'}">企业专用</span> 
    <button class='appearA'>申请定位</button>
</li>
    `
});

split_List.innerHTML = depositAlistB


// 点击关闭模态框
let Modal_box = document.querySelector('.Modal_box')
let iconG = document.querySelector('.iconG');
let appearA = document.querySelectorAll('.appearA')
iconG.addEventListener('click', function () {
    Modal_box.style.display = 'none';
})

appearA.forEach(function (W) {
    W.addEventListener('click', function () {
        Modal_box.style.display = 'block';
    })
})


// 登录
// 登录

from.addEventListener("submit", function (event) {
    let Benchmark = true;
    //用户
    if (user.value.length > 2 && user.value.length <= 18) {
        text_span.innerHTML = "通过";
        text_span.style.color = "green";

    } else {
        text_span.innerHTML = "输入错误";
        text_span.style.color = "red";
        Benchmark = false;
    }

    //密码 
    if (Pasworder.value.length > 2 && Pasworder.value.length <= 18) {
        pswoder_span.innerHTML = "通过";
        pswoder_span.style.color = "green";

    } else {
        pswoder_span.innerHTML = "输入错误";
        pswoder_span.style.color = "red";
        Benchmark = false;
    }

    if (Benchmark == false) {
        event.preventDefault(); 
    }
})

